
// input输入事件 下一个兄弟标签 样式显示
let inputs = document.querySelectorAll("main p input")
inputs.forEach(function (v) {
    v.addEventListener("input", function () {
        this.nextElementSibling.style.display = "block"
    })
})
// 点击叉叉清除input里面的内容
let imgs = document.querySelectorAll("main p img")
imgs.forEach(function (v) {
    v.addEventListener("click", function () {
        // 上一个标签对象
        this.previousElementSibling.value = ""
        console.log(this.previousElementSibling);
    })
})
// 勾选阅读时buttun按钮变色
let divinput = document.querySelector("main .div-input input")
let button = document.querySelector("main button")
divinput.addEventListener("click", function () {
    // 选中是返回ture
    if (divinput.checked) {
        button.style.backgroundColor = "#e0e0e0"
        button.style.color = "#333"
    } else {
        button.style.backgroundColor = "#00bdff"
        button.style.color = "white"
    }

})
// 正则
// 昵称需在6-12位字母数字间
let number=document.querySelector("main form .number")
number.addEventListener("blur",function(){
if( !/^[a-zA-Z0-9]{6,12}$/.test(this.value)){
    // 下下个兄弟标签
this.nextElementSibling.nextElementSibling.style.display="block"
}else{
    this.nextElementSibling.nextElementSibling.style.display="none"
}

})

let tel=document.querySelector("main form .tel")
tel.addEventListener("blur",function(){
if( !/^1[3-9]\d{9}$/.test(this.value)){
this.nextElementSibling.nextElementSibling.style.display="block"
}else{
    this.nextElementSibling.nextElementSibling.style.display="none"
}

})

let code=document.querySelector("form .obtain-p .code")
code.addEventListener("blur",function(){    
if( !/^[0-9]{4}$/.test(this.value)){
    console.log(this.nextElementSibling.nextElementSibling);
this.nextElementSibling.nextElementSibling.style.display="block"
}else{
    this.nextElementSibling.nextElementSibling.style.display="none"
}
})

let password=document.querySelector("main form .password")
password.addEventListener("blur",function(){
if( !/^[0-9]{6,12}$/.test(this.value)){
this.nextElementSibling.nextElementSibling.style.display="block"
}else{
    this.nextElementSibling.nextElementSibling.style.display="none"
}

})
